<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>computed计算属性</title>
</head>
<body>
	<div id="app">
		<p>{{unCheckedLength}}</p>

	</div>
</body>
</html>
<script src="../2.1.8/vue.js"></script>
<script>
	/*
		1. 避免在 list 里面写入 逻辑代码
		2. computed : 专有属性
		3. 在 computed 中定义相应的方法和功能

		可以设置值 ：对应对象


	*/
	let list = [{ 
			title : '马云',
			isChecked : true, // 表示选中
		},{ 
			title : '李彦宏1',
			isChecked : false, // 表示未选中 
		},{ 
			title : '李彦宏2',
			isChecked : false, // 表示未选中 
		},{ 
			title : '李彦宏3',
			isChecked : false, // 表示未选中 
		},{ 
			title : '李彦宏4',
			isChecked : false, // 表示未选中 
		},{ 
			title : '李彦宏5',
			isChecked : false, // 表示未选中 
		}];
	let vm = new Vue({
		el : '#app',
		data : {
			list : list
		},
		computed : {
			// 函数，只能在插值时 写入函数引用
			unCheckedLength(){
				return this.list.filter(item=>!item.isChecked).length;
			}
		}
	});
</script>